<template>
  <div>
    <scroller 
      ref="my_scroller" 
      :on-refresh="refresh" 
      :on-infinite="infinite">
      <div 
        v-for="(item, index) in fplayList" 
        :key="index" 
        class="mui-card" 
        @click="godetail(item)">
        <div
          :style="{backgroundImage:'url('+item.img+')'}"
          class="mui-card-header mui-card-media"
          style="height:40vw"
        />
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p style="color: #333;">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      fplayList: [],
      page: 1,
      pageSize: '10'
    }
  },
  created() {
    this.getfplayList()
  },
  methods: {
    refresh(done) {
      this.page = 1
      this.getfplayList(done)
      setTimeout(() => {
        this.$refs.my_scroller.finishPullToRefresh()
      }, 200)
    },
    infinite(done) {
      setTimeout(() => {
        this.page += 1
        this.getfplayList(done)
      }, 500)
    },
    getfplayList(fn) {
      const req = {
        columnid: 'tghd',
        token: localStorage.getItem('token'),
        page: this.page + '',
        pageSize: this.pageSize
      }
      this.spost(this.ts, '/Newindex/wxinfolist', req).then(ts => {
        if (ts.d.data.length < 1) {
          fn(true)
          return
        } else if (fn) {
          fn()
        }
        if (this.page == 1) {
          this.fplayList = ts.d.data
        } else {
          this.fplayList = this.fplayList.concat(ts.d.data)
        }
      })
    },
    godetail(item) {
      this.$router.push({
        name: 'finfodetail',
        query: {
          from: '活动',
          word: '活动详情',
          id: item.id,
          istghd: item.istghd,
          type: item.column_id,
          token: localStorage.getItem('token')
        }
      })
    }
  }
}
</script>

<style>
</style>
